<template>
    <div class="xl-until">
        <div class="xl-until-left">
            <div class="xl-until-text">
                {{text || ''}}
            </div>
        </div>
        <div class="xl-until-right">
            <slot name="search"></slot>
            <a-input-search v-model='queryParam.keyword'  enter-button @search="searchKeyWord" style="width: 200px;"  placeholder="输入搜索内容"/>
            <div class="xl-hr"></div>
            <a-button v-if="addBtn" block @click="$emit('addForm')"> 新增
                <a-icon type="plus"/>
            </a-button>
            <slot name="btn"></slot>
            <a-dropdown v-if="untilVisible">
                <a-menu slot="overlay">
                    <a-menu-item key="1" v-if="exportBtn" @click="exportXls">
                        导出
                    </a-menu-item>
                    <a-menu-item  v-if="importBtn" @click="setImport" key="2">
                        导入
                    </a-menu-item>
                    <!--<a-menu-item  v-if="delBtn" @click="$emit('delBatch')" key="3">-->
                        <!--删除-->
                    <!--</a-menu-item>-->
                </a-menu>
                <a-button block> 操作
                    <a-icon type="down"/>
                </a-button>
            </a-dropdown>
            <div class="xl-hr"></div>
            <div class="xl-until-item">
                <a-icon type="fullscreen" @click="setScreen"/>
            </div>
            <!--<div class="xl-until-item" v-if="searchBtn">-->
                <!--<a-icon type="unordered-list" @click="$refs.search.visible = true"/>-->
            <!--</div>-->
        </div>
        <exportXls ref="exportXls" @downLoad="downLoadFilters"></exportXls>
        <search ref="search" v-bind="$attrs" v-on="$listeners">

        </search>
        <xlImport ref="import" v-bind="$attrs" v-on="$listeners" @downLoadDemo="downLoadDemo" @importXls="importXls"></xlImport>
    </div>
</template>

<script>
    import screenfull from 'screenfull'
    import exportXls from './exportXls'
    import axios from 'axios'
    import search from './search'
    import {getToken} from "../../assets/service/auth";
    import xlImport from './import'
    export default {
        name: "index",
        data() {
            return {
                screen: false,
                keyword:''
            }
        },
        components:{
            exportXls,
            search,
            xlImport
        },
        props:{
            queryParam:{
                type: Object,
                default:{}
            },
            exportXlsUrl:String,
            exportXlsData:Array,
            importExcelUrl:String,
            importExcelDemoUrl:String,
            text:String,
            untilVisible:{
                type: Boolean,
                default() {
                    return true;
                }
            },
            addBtn:{
                type: Boolean,
                default() {
                    return true;
                }
            },
            importBtn:{
                type:Boolean,
                default: true
            },
            delBtn:{
                type:Boolean,
                default: true
            },
            searchBtn:{
                type:Boolean,
                default: true
            },
            exportBtn:{
                type:Boolean,
                default: true
            },
            filtersVislble:{
                type:Boolean,
                default: false
            },
        },
        methods: {
            exportXls(){
                if(!this.filtersVislble){
                    this.downLoad()
                }else{
                    this.openExportXls()
                }
            },
            searchKeyWord(){
                this.$emit('searchKeyWord')
            },
            setScreen() {
                screenfull.toggle()
            },
            downLoadFilters(queryModel){
                axios({
                    url: this.$parent.url.exportXlsUrl,
                    method: 'POST',
                    data:{
                        param: {
                            fieldList:queryModel,
                            keyword:this.queryParam.keyword
                        }
                    },
                    headers: {
                        token: getToken()
                    },
                    responseType: 'blob'
                })
                    .then(result => {
                        let url = window.URL.createObjectURL(new Blob([result.data]))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        if (result.headers['content-disposition']) {
                            link.setAttribute('download', result.headers['content-disposition'].split(';')[1].split('=')[1])
                        } else {
                            this.$message.error('下载失败，请联系管理员')
                            return
                        }

                        document.body.appendChild(link)
                        link.click()
                        this.$refs.exportXls.visible = false
                        this.$refs.exportXls.confirmLoading = false
                    })
            },
            downLoad(queryModel) {
                // 导出
                axios({
                    url: this.$parent.url.exportXlsUrl,
                    method: 'POST',
                    data:{
                        param: {
                            keyword:this.queryParam.keyword || undefined,
                            ...this.$refs.search.form,
                            ...this.$parent.queryParam
                        }
                    },
                    headers: {
                        token: getToken()
                    },
                    responseType: 'blob'
                })
                    .then(result => {
                        let url = window.URL.createObjectURL(new Blob([result.data]))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        if (result.headers['content-disposition']) {
                            link.setAttribute('download', result.headers['content-disposition'].split(';')[1].split('=')[1])
                        } else {
                            this.$message.error('下载失败，请联系管理员')
                            return
                        }

                        document.body.appendChild(link)
                        link.click()
                        this.$refs.exportXls.visible = false
                        this.$refs.exportXls.confirmLoading = false
                    })
            },
            downLoadDemo() {
                axios({
                    url: this.$parent.url.importExcelDemoUrl,
                    method: 'POST',
                    data:{
                        param: {}
                    },
                    headers: {
                        token: getToken()
                    },
                    responseType: 'blob'
                })
                    .then(result => {
                        let url = window.URL.createObjectURL(new Blob([result.data]))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        if (result.headers['content-disposition']) {
                            link.setAttribute('download', result.headers['content-disposition'].split(';')[1].split('=')[1])
                        } else {
                            this.$message.error('下载失败，请联系管理员')
                            return
                        }

                        document.body.appendChild(link)
                        link.click()
                        this.$refs.exportXls.visible = false
                        this.$refs.exportXls.confirmLoading = false
                    })
            },
            importXls(file){
                axios({
                    url: this.$parent.url.importExcelUrl,
                    method: 'POST',
                    data:{
                        param: {
                            batchFilePath:file
                        }
                    },
                    headers: {
                        token: getToken()
                    }
                })
                    .then(result => {
                        if(result.data.resultCode != 200){
                            this.$message.error(result.data.resultMessage)
                            return
                        }
                        this.$message.success('导入成功')
                        this.$refs.import.visible = false
                        this.$parent.pageOnload()
                    })
            },
            setImport(){
                this.$refs.import.file = ''
                this.$refs.import.visible = true
            },
            openExportXls(){
                this.$refs.exportXls.formatData(this.exportXlsData)
                this.$refs.exportXls.visible = true
            }
        }
    }
</script>

<style scoped lang="less">
    .xl-until {
        width: 100%;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 0 5px rgba(0,0,0,.2);
        .xl-until-right, .xl-until-left {
            display: flex;
            align-items: center;
        }

        .xl-until-left {
            padding-left: 10px;
        }
        .xl-until-right{
            padding-right: 10px;
        }
        .xl-until-text {
            span {
                color: #000;
            }
        }

        .xl-hr {
            width: 1px;
            height: 20px;
            background-color: #d5d5d5;
            margin: 0 5px;
        }

        .xl-until-item {
            width: 50px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .anticon {
                font-size: 20px;
            }
        }

        .ant-btn {
            margin: 0 12px;
            width: 100px;
        }

        .anticon {
            font-size: 14px;
        }

        .ant-input {
            width: 200px;
            margin: 0 12px;
        }
    }
</style>
